<template>
  <div class="home">
    <el-container style="height: 500px; border: 1px solid #eee">

  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <div class="logo">
    <img src="@/assets/logo.png" alt="" >
    <span>后台管理系统</span>
    </div>
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i><router-link to="/Home/one">主页</router-link></template>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i><router-link to="/Home/two">单独的路由</router-link></template>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-s-tools"></i><router-link to="/Home/three">外链</router-link></template>
      </el-submenu>
       <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
         <router-link to="/Home/three">二级菜单</router-link>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1"><router-link to="/Home/one">表格</router-link></el-menu-item>
          <el-menu-item index="1-2">外链</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">三级菜单</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  <!-- 主体 -->
  <router-view />
</el-container>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  methods:{
  },
};
</script>
<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
   a{
    text-decoration: none;
    color:#000;
    display: inline-block;
    width:100%;
  }
 .el-aside{
   background:#000; 
 }
 .logo{
   display: flex;
  align-items: center;
  justify-content: center;
  
 }
 .logo img{
   width: 50px;
   height: 50px;
 }
 </style>